Cypress UI Automation - part 3

 

Cross Browser Testing

BrowserStack implementation

I created a local git branch using Visual studio code, then installed BrowserStack as follows:

Firstly install it on the command line :

npm install -g BrowserStack-cypress-cli --save-dev

Setup the BrowserStack credentials to use by initiating the browserstack.json file as follows:

BrowserStack-cypress init

If this does not work, right-click the cypress folder, create a new file as BrowserStack-cypress.json.

I executed the following command.

npm run test:first. To run the BrowserStack tests. Below is a screenshot of the browserstack.json file.

Code in the package.json file to execute the BrowserStack tests:

In the change, I have edited the baseUrl with the –env env=stg, pointing it to the environment file which contains details of the test environment that loads the test pages/websites. Then I specified details of a test spec file.

I executed the test command resulting in a successful execution –

Errors after the test execution –

I examined the error and realised it was due to an automation error.

After I made changes to the automation script, I executed the command –‘npm run browserstack:tests’ to run BrowserStack again and all tests passed -.

In the above screenshot, you can view a video of the tests, which is fantastic and very convenient to watch and perhaps analyse any problems along the way. At the top, you get all the details for the operating system (OS) as WINDOWS 10, and browser as CHROME.  

 

I used details such as popular devices and browsers from our Google analytics to design the browserstack.json settings -

View part - 4 - Visual Testing, here.

Thank you for visiting my website.